<template>
  <div class="means" :style="{minHeight:$store.state.minHeight+'rem'}">
    <header>
      <div class="top">
        <img src="../../../static/img/zuojiantou.png" alt="" @click="back">
        <span>我的资产</span>
      </div>
      <div class="center">
        <div class="total">
          <div class="totalDesc">
            <span>总资产（元）</span>
            <span @click="see()">
              <img src="../../../static/img/business/see.png" alt="">
            </span>
          </div>
          <div class="money" v-if="money">
            <span>￥</span>
            <span>14,000</span>
          </div>
          <div class="money" v-else>
            <span>***</span>
          </div>
        </div>
        <router-link class="withdraw" tag="div" to="/views/Business/withdraw">提现</router-link>
      </div>
    </header>
    <div class="account">
      <div class="card">
        <div class="card_content">
          <div>今日收益</div>
          <div>12,235</div>
        </div>
        <div class="card_content">
          <div>待入账</div>
          <div>120.53</div>
        </div>
        <div class="card_content">
          <div>已入账</div>
          <div>120.53</div>
        </div>
      </div>
      <router-link class="detail" tag="div" to="/views/Business/account">
        <img src="../../../static/img/business/account.png" alt="">
        <span>账户明细</span>
        <van-icon name="arrow" color="#999999" size="17" />
      </router-link>
    </div>
    <div class="chart">
      <div class="banner">
        <div>
          <span>4</span>
          <span>月份收益月报</span>
        </div>
        <img src="../../../static/img/business/detail.png" alt="">
      </div>
      <div class="profit">
        <div class="profit_title">收益走势曲线图</div>
        <div class="profitTab">
          <div v-for="(x,y) in tab" class="tab_box" @click="isTab(y)">
            <p :class="present == y?'':'selected'">{{x.text}}</p>
            <transition name="el-zoom-in-center">
              <p v-show="present == y"></p>
            </transition>
          </div>
        </div>
        <div class="profitChart" v-if="present == 0">
          <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
        </div>
        <div class="profitChart" v-if="present == 1">
          <chart ref="chart2" :options="orgOptions1" :auto-resize="true"></chart>
        </div>
        <div class="profitChart" v-if="present == 2">
          <chart ref="chart3" :options="orgOptions2" :auto-resize="true"></chart>
        </div>
        <div class="profitChart" v-if="present == 3">
          <chart ref="chart4" :options="orgOptions3" :auto-resize="true"></chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import Vue from 'vue';
    import { Icon } from 'vant';


    Vue.use(Icon);

    export default {
        name: "means",
        data() {
          return {
            orgOptions: {},
            orgOptions1: {},
            orgOptions2: {},
            orgOptions3: {},
            tab: [
              {text: '日收益'},
              {text: '月收益'},
              {text: '年收益'},
              {text: '累计收益'}
            ],
            money:true,
            present: 0,
          }
        },
      methods: {
        back() {
          this.$router.back();
        },
        isTab(index){
          this.present = index;
        },
        see(){
          this.money = !this.money
        }
      },
      mounted() {
        this.orgOptions = {
          xAxis: {
            type: 'category',
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
            textStyle: {
              fontSize: 12
            },
          },
          yAxis: {
            type: 'value',
            textStyle: {
              fontSize: 12
            },
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }]
        };
        this.orgOptions1 = {
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
            textStyle: {
              fontSize: 12
            },
          },
          yAxis: {
            type: 'value',
            textStyle: {
              fontSize: 12
            },
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320, 1600, 1400, 1800, 1900, 2000],
            type: 'line',
            smooth: true
          }]
        };
        this.orgOptions2 = {
          xAxis: {
            type: 'category',
            data: ['2016', '2017', '2018', '2019', '2020'],
            textStyle: {
              fontSize: 12
            },
          },
          yAxis: {
            type: 'value',
            textStyle: {
              fontSize: 12
            },
          },
          series: [{
            data: [10000, 19000, 21000, 30000, 9000],
            type: 'line',
            smooth: true
          }]
        };
        this.orgOptions3 = {
          xAxis: {
            type: 'category',
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
            textStyle: {
              fontSize: 12
            },
          },
          yAxis: {
            type: 'value',
            textStyle: {
              fontSize: 12
            },
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }]
        }
      },
    }
</script>

<style scoped>
  .echarts{
    width: 3.75rem;
    height: 2.6rem;
  }
  .profitTab {
    width: calc(100% - .4rem);
    height: 100%;
    max-height: .45rem;
    padding: 0 .2rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    /*align-items: center;*/
    background-color: #ffffff;
  }

  .profitTab .tab_box {
    height: 100%;
    max-height: .55rem;
    padding: 0 .1rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    /*align-items: center;*/
    box-sizing: border-box;
    text-align: center;
  }

  .profitTab .tab_box > p:nth-child(1) {
    color: #FB4448;
    font-size: .13rem;
    line-height: .16rem;
    padding: .15rem 0 .13rem;
  }

  .profitTab .tab_box > p:nth-child(2) {
    width: 100%;
    height: .02rem;
    background-color: #FF300D;
    border-radius: .01rem;
  }


  .el-loading-spinner {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    min-height: 5rem;
  }

  .selected {
    color: #333333 !important;
    font-size: .13rem !important;
  }

  .means{
    background: #F5F5F5;
  }
  .means header{
    width: 100%;
    height: 1.86rem;
    background: linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    color: #ffffff;
  }
  .means header .top{
    height: .5rem;
    display: flex;
    align-items: center;
    padding: 0 .1rem;
  }
  .means header > div > img {
    width: .11rem;
    height: .18rem;
  }

  .means header > div > span {
    font-size: .18rem;
    font-weight: 500;
    color: #ffffff;
    flex-grow: 1;
    text-align: center;
  }
  .means .center{
    display: flex;
    justify-content: space-between;
    margin: .2rem .28rem 0;
  }
  .means .total{
    flex-grow: 1;

  }
  .means .totalDesc{
      font-size: .15rem;
    margin-bottom: .05rem;
  }
  .means .totalDesc span img{
    width: .1rem;
    height: .07rem;
  }
  .means .money{
    font-size: .12rem;
  }
  .means .money span:nth-child(2){
    font-size: .18rem;
    font-weight: bold;
  }
  .means .withdraw{
    font-size: .14rem;
    border:1px solid #ffffff;
    width: .8rem;
    height: .28rem;
    text-align: center;
    line-height: .3rem;
    border-radius: .3rem;
  }
  .means .account{
    background: #ffffff;
    padding: .5rem 0 .1rem;
    position: relative;
  }
  .means .card{
    position: absolute;
    top: -.37rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 3.4rem;
    height: .75rem;
    box-shadow: 0 0 .1rem #CCCCCC;
    background: #ffffff;
    left: 50%;
    transform: translateX(-50%);
    border-radius: .08rem;
  }
  .means .card_content{
    width: calc(100% / 3);
    text-align: center;
    font-size: .14rem;
  }
  .card_content div:nth-child(2){
    font-size: .16rem;
    font-weight: bold;
    margin-top: .04rem;
  }
  .means .detail{
    display: flex;
    padding: .1rem .14rem;
    justify-content: space-between;
  }
  .means .detail span{
    flex-grow: 1;
    margin-left: .16rem;
  }
  .means .detail img{
    width: .2rem;
    height: .2rem;
  }
  .means .chart{
    background: #ffffff;
    margin-top: .05rem;
  }
  .means .banner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .02rem 0 .03rem .22rem ;
    font-size: .18rem;
    font-weight: bold;
    color: #FB4448;
  }
  .means .banner div span:nth-child(1){
    font-size: .3rem;
  }
  .means .banner img{
    width: 1.5rem;
    height: .7rem;
  }
  .means .profit{
    border-top: 1px solid #FB4448;
  }
  .means .profit_title{
    font-size: .15rem;
    font-weight: bold;
    margin-left: .22rem;
    margin-top: .16rem;
    color: #1E1E1E;
  }
  .means .profitChart{
    padding-top: .1rem;
  }
</style>
